<template>
	<Echart
		id="leftCenter6"
		:options="options"
		class="left_center_inner"
		ref="daycharts"
	/>
</template>

<script>
import { boxRealtime } from "@/api/modules/energyunit.js";
import { graphic } from "echarts";
import { getgraph } from "@/api/modules/home.js";

export default {
	props: ["info"],
	data() {
		return {
			options: {},
			xData: [],
		};
	},
	watch: {
		info: {
			handler(newValue, oldValue) {
				if (newValue) {
					this.getData(newValue);
				}
			},
			deep: true,
		},
	},
	methods: {
		callApi(item) {
			return new Promise((resolve) => {
				getgraph({ devId: item.id, sampleName: "soc" }).then((res) => {
					if (res.code == 200) {
						let ygListItem = {};
						let xDataItem = [];
						let selfListItem = "";
						ygListItem = {
							type: "line",
							symbol: "none",
							// areaStyle: {},
							data: [],
							name: item.cname,
						};

						selfListItem = item.cname;
						let data = res.data;
						for (let i = 0; i < data.length; i++) {
							let element = data[i];
							xDataItem.push(element.date);
							ygListItem.data.push(
								element.graphHisDTO ? element.graphHisDTO.value.toFixed(2) : ""
							);
						}
						resolve({
							ygListItem: ygListItem,
							xDataItem: xDataItem,
							selfListItem: selfListItem,
						});
					} else {
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			});
		},
		async getData(newValue) {
			if (newValue.length > 0) {
				const { xData, ygList, selfList } = await this.getChartsData(newValue);
				this.init(xData, ygList, selfList);
			} else {
				this.$Message({
					text: "暂无数据",
					type: "warning",
				});
			}
		},
		async getChartsData(newValue) {
			let xData = [];
			let ygList = [];
			let selfList = [];
			let resultPromise = [];
			newValue.forEach(async (item, index) => {
				resultPromise.push(this.callApi(item));
			});
			const resultAll = await Promise.all(resultPromise);
			resultAll.forEach((result) => {
				if (xData.length <= 0) {
					xData = [...result.xDataItem];
				}
				ygList.push(result.ygListItem);
				selfList.push(result.selfListItem);
			});
			return { xData, ygList, selfList };
		},
		init(xData, yData, dataY2name) {
			this.options = {
				legend: {
					x: "center", //可设定图例在左、右、居中
					y: "10px",
					data: dataY2name,
					textStyle: {
						fontSize: 12,
						color: "#F1F1F3",
					},
				},
				xAxis: {
					type: "category",
					data: xData,
					boundaryGap: false, // 不留白，从原点开始
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						// show:false,
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				yAxis: {
					name: "单位 ：%",
					nameTextStyle: {
						color: "#fff",
						fontSize: 12,
					},
					type: "value",
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
					formatter: function (params) {
						var result = params[0].name + "<br/>";
						params.forEach(function (item) {
							result += item.seriesName + ": " + item.value + "<br/>";
						});
						return result;
					},
				},
				grid: {
					//布局
					show: true,
					left: "40px",
					right: "30px",
					bottom: "10px",
					top: "48px",
					containLabel: true,
					borderColor: "#1F63A3",
				},
				series: yData,
			};
		},
	},
};
</script>
<style lang="scss" scoped></style>
